import React, { useState, useEffect } from 'react';
import * as mbtiService from '@/api/mbtiService';
import { motion, AnimatePresence } from 'framer-motion';
import { useTranslation } from 'react-i18next';

interface MbtiPopupProps {
    show: boolean;
    onClose: () => void;
}

const defaultJwt = '';

// Helper function to get dimension name
const getDimensionName = (letter: string, t: any): string => {
    return t(`mbtiPopup.dimensionNames.${letter}`);
};

const MbtiPopup: React.FC<MbtiPopupProps> = ({ show, onClose }) => {
    const { t } = useTranslation();

    // States
    const [step, setStep] = useState<'start' | 'test' | 'result'>('start');
    const [jwt, setJwt] = useState(defaultJwt);
    const [sessionId, setSessionId] = useState<string | null>(null);
    const [question, setQuestion] = useState<mbtiService.MbtiQuestion | null>(null);
    const [progress, setProgress] = useState(0);
    const [remaining, setRemaining] = useState(0);
    const [selectedOption, setSelectedOption] = useState<string | null>(null);
    const [answerHistory, setAnswerHistory] = useState<any[]>([]);
    const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState<string | null>(null);
    const [result, setResult] = useState<mbtiService.MbtiResult | null>(null);
    const [detailedAnalysis, setDetailedAnalysis] = useState<string>('');
    const [analysisLoading, setAnalysisLoading] = useState(false);

    // Reset when closing
    useEffect(() => {
        if (!show) {
            setStep('start');
            setJwt(defaultJwt);
            setSessionId(null);
            setQuestion(null);
            setProgress(0);
            setRemaining(0);
            setSelectedOption(null);
            setAnswerHistory([]);
            setCurrentQuestionIndex(0);
            setLoading(false);
            setError(null);
            setResult(null);
            setDetailedAnalysis('');
            setAnalysisLoading(false);
        }
    }, [show]);

    // Initialize test
    const handleStart = async () => {
        setLoading(true);
        setError(null);
        try {
            const { session_id } = await mbtiService.initTest(jwt);
            setSessionId(session_id);
            setAnswerHistory([]);
            setCurrentQuestionIndex(0);
            await loadNextQuestion(session_id, jwt, []);
            setStep('test');
        } catch (e: any) {
            setError(e.message);
        }
        setLoading(false);
    };

    // Load next question
    const loadNextQuestion = async (sid: string, jwtToken: string, history: any[]) => {
        setLoading(true);
        setError(null);
        try {
            const data = await mbtiService.getNextQuestion(sid, jwtToken);
            setQuestion(data.question);
            setProgress(data.progress);
            setRemaining(data.remaining_questions);
            setSelectedOption(null);
        } catch (e: any) {
            // 400 means test is complete
            if (e.message.includes('400')) {
                await loadResult(sid, jwtToken, history);
                setStep('result');
            } else {
                setError(e.message);
            }
        }
        setLoading(false);
    };

    // Submit answer
    const handleSubmitAnswer = async () => {
        if (!sessionId || !question || !selectedOption) return;
        setLoading(true);
        setError(null);
        try {
            const newHistory = [...answerHistory];
            const questionInfo = {
                id: question.id,
                text: question.text,
                selectedOption,
                answerText: question.options[selectedOption].text,
            };
            if (currentQuestionIndex < newHistory.length) {
                newHistory[currentQuestionIndex] = questionInfo;
                newHistory.splice(currentQuestionIndex + 1);
            } else {
                newHistory.push(questionInfo);
            }
            setAnswerHistory(newHistory);
            setCurrentQuestionIndex(newHistory.length);
            const data = await mbtiService.submitAnswer(sessionId, jwt, question.id, selectedOption);
            setProgress(data.progress);
            setRemaining(data.remaining_questions);
            if (data.is_complete) {
                await loadResult(sessionId, jwt, newHistory);
                setStep('result');
            } else {
                setQuestion(data.next_question);
                setSelectedOption(null);
            }
        } catch (e: any) {
            setError(e.message);
        }
        setLoading(false);
    };

    // Previous question
    const handlePrev = () => {
        if (currentQuestionIndex <= 0) return;
        const prev = answerHistory[currentQuestionIndex - 1];
        setCurrentQuestionIndex(currentQuestionIndex - 1);
        setQuestion({
            id: prev.id,
            text: prev.text,
            options: question?.options || {},
        });
        setSelectedOption(prev.selectedOption);
    };

    // Result
    const loadResult = async (sid: string, jwtToken: string, history: any[]) => {
        setLoading(true);
        setError(null);
        try {
            const res = await mbtiService.getResult(sid, jwtToken);
            setResult(res);
            setAnalysisLoading(true);
            // Submit form for detailed analysis
            const formAnswers = history.map((item: any) => ({ question: item.text, answer: item.answerText }));
            const formRes = await mbtiService.submitForm(sid, jwtToken, formAnswers);
            setDetailedAnalysis(formRes.detailed_analysis);
            setAnalysisLoading(false);
        } catch (e: any) {
            setError(e.message);
            setAnalysisLoading(false);
        }
        setLoading(false);
    };

    // Handle backdrop click
    const handleBackdropClick = (e: React.MouseEvent) => {
        // Make sure it's the backdrop not the content area
        if (e.target === e.currentTarget) {
            onClose();
        }
    };

    // Popup styles
    return (
        <AnimatePresence>
            {show && (
                // 蒙版 
                <motion.div
                    className="fixed inset-0 z-[9999] flex items-center justify-center bg-white bg-opacity-30"
                    onClick={handleBackdropClick}
                    initial={{ opacity: 0 }}
                    animate={{ opacity: 1 }}
                    exit={{ opacity: 0 }}
                    transition={{ duration: 0.3 }}
                >
                    {/* Card */}
                    <motion.div
                        className="relative w-[98vw] max-w-[900px] max-h-[95vh] overflow-y-auto rounded-lg bg-[rgb(19,19,19)] shadow-xl"
                        onClick={(e) => e.stopPropagation()}
                        initial={{ scale: 0.9, y: 20, opacity: 0 }}
                        animate={{ scale: 1, y: 0, opacity: 1 }}
                        exit={{ scale: 0.9, y: 20, opacity: 0 }}
                        transition={{
                            type: "spring",
                            stiffness: 300,
                            damping: 30,
                            delay: 0.1
                        }}
                    >
                        {/* 关闭按钮  */}
                        <motion.button
                            onClick={onClose}
                            className="absolute right-5 top-5 z-10 text-4xl text-[#4a6fa5] bg-transparent border-none cursor-pointer"
                            whileHover={{ scale: 1.2, rotate: 90 }}
                            whileTap={{ scale: 0.9 }}
                            transition={{ duration: 0.2 }}
                        >
                            ×
                        </motion.button>


                        <div className="p-6">
                            <motion.header
                                className="text-center mb-6"
                                initial={{ y: -20, opacity: 0 }}
                                animate={{ y: 0, opacity: 1 }}
                                transition={{ delay: 0.2 }}
                            >  {/* 标题部分 */}
                                <h1 className="text-3xl text-[rgb(223,35,119)] font-bold">{t('mbtiPopup.title')}</h1>
                                <p className="text-[white] mt-1">{t('mbtiPopup.subtitle')}</p>
                            </motion.header>

                            {error && (
                                <motion.div
                                    className="bg-[#ffe8e8] text-[#ff6b6b] p-3 my-3 rounded-lg border-l-4 border-[#ff6b6b]"
                                    initial={{ opacity: 0, x: -20 }}
                                    animate={{ opacity: 1, x: 0 }}
                                    exit={{ opacity: 0, x: -20 }}
                                >
                                    {error}
                                </motion.div>
                            )}

                            {step === 'start' && (
                                <motion.div
                                    className="bg-[rgb(19,19,19)] rounded-lg p-6 mb-5 shadow"
                                    initial={{ opacity: 0, y: 20 }}
                                    animate={{ opacity: 1, y: 0 }}
                                    transition={{ delay: 0.3 }}
                                >
                                    <h2 className="text-xl mb-4">{t('mbtiPopup.start.title')}</h2>
                                    <p className="mb-6">{t('mbtiPopup.start.description')}</p>

                                    <div className="flex justify-center mt-5">
                                        <motion.button
                                            className="bg-[#4a6fa5] text-white py-4 px-8 text-lg rounded-lg border-none cursor-pointer hover:bg-[#3a5f95] disabled:opacity-50 disabled:cursor-not-allowed"
                                            onClick={handleStart}
                                            disabled={loading}
                                            whileHover={{ scale: 1.05 }}
                                            whileTap={{ scale: 0.95 }}
                                            transition={{ type: "spring", stiffness: 400, damping: 17 }}
                                        >
                                            {loading ? t('mbtiPopup.loading') : t('mbtiPopup.start.startButton')}
                                        </motion.button>
                                    </div>
                                </motion.div>
                            )}

                            {step === 'test' && question && (
                                <>
                                    <motion.div
                                        className="rounded-lg p-6 mb-5 shadow"
                                        initial={{ opacity: 0, y: 20 }}
                                        animate={{ opacity: 1, y: 0 }}
                                        transition={{ delay: 0.2 }}
                                    >
                                        <div className="h-2.5 bg-[#e9ecef] rounded-md overflow-hidden">
                                            <motion.div
                                                className="h-full bg-[#df2377]"
                                                initial={{ width: 0 }}
                                                animate={{ width: `${Math.round(progress * 100)}%` }}
                                                transition={{ duration: 0.8, ease: "easeOut" }}
                                            ></motion.div>
                                        </div>
                                        <div className="text-right text-sm mt-1 text-[white]">
                                            {t('mbtiPopup.test.progress', { progress: Math.round(progress * 100), remaining })}
                                        </div>
                                    </motion.div>

                                    <div className="flex flex-col md:flex-row gap-8">
                                        <motion.div
                                            className="flex-grow md:w-2/3"
                                            initial={{ opacity: 0, x: -20 }}
                                            animate={{ opacity: 1, x: 0 }}
                                            transition={{ delay: 0.3 }}
                                        >
                                            <div className="bg-white rounded-lg p-6 mb-5 shadow">
                                                <motion.div
                                                    className="text-lg font-medium mb-5"
                                                    initial={{ opacity: 0 }}
                                                    animate={{ opacity: 1 }}
                                                    key={question.id}
                                                    transition={{ duration: 0.5 }}
                                                >
                                                    {question.text}
                                                </motion.div>

                                                <div className="flex flex-col gap-3">
                                                    {Object.entries(question.options).map(([key, opt]) => (
                                                        <motion.div
                                                            key={key}
                                                            className={`p-4 rounded-lg cursor-pointer transition-all ${selectedOption === key
                                                                ? 'bg-[rgb(223,35,119,0.8)] text-white border-2 border-[rgb(223,35,119)]'
                                                                : 'bg-[#e9ecef] text-gray-800 border-2 border-transparent hover:bg-[#d9e2ec] hover:border-[#6b8caf]'
                                                                }`}
                                                            onClick={() => setSelectedOption(key)}
                                                            initial={{ opacity: 0, y: 20 }}
                                                            animate={{
                                                                opacity: 1,
                                                                y: 0,
                                                                scale: selectedOption === key ? 1.02 : 1,
                                                                boxShadow: selectedOption === key ? "0 4px 12px rgba(74, 111, 165, 0.3)" : "none"
                                                            }}
                                                            transition={{
                                                                type: "spring",
                                                                stiffness: 500,
                                                                damping: 30,
                                                                delay: 0.3 + parseInt(key) * 0.1
                                                            }}
                                                            whileHover={{
                                                                scale: 1.03,
                                                                boxShadow: "0 6px 15px rgba(0,0,0,0.1)"
                                                            }}
                                                            whileTap={{
                                                                scale: 0.97,
                                                                transition: { type: "spring", stiffness: 300, damping: 10 }
                                                            }}
                                                            layout
                                                        >
                                                            <div className="flex items-center">
                                                                <motion.span
                                                                    className={`inline-flex items-center justify-center w-6 h-6 rounded-full mr-3 border-2 ${selectedOption === key
                                                                        ? 'bg-white border-white'
                                                                        : 'bg-transparent border-gray-400'
                                                                        }`}
                                                                    animate={{
                                                                        scale: selectedOption === key ? [1, 1.2, 1] : 1,
                                                                        backgroundColor: selectedOption === key ? "#ffffff" : "transparent"
                                                                    }}
                                                                    transition={{
                                                                        duration: 0.3,
                                                                        times: [0, 0.6, 1]
                                                                    }}
                                                                >
                                                                    {selectedOption === key && (
                                                                        <motion.div
                                                                            className="w-2 h-2 rounded-full bg-[re]"
                                                                            initial={{ scale: 0 }}
                                                                            animate={{ scale: 1 }}
                                                                            transition={{ type: "spring", stiffness: 500, damping: 30 }}
                                                                        />
                                                                    )}
                                                                </motion.span>
                                                                <span>{key}. {opt.text}</span>
                                                            </div>
                                                        </motion.div>
                                                    ))}
                                                </div>

                                                <div className="flex justify-between items-center mt-5">
                                                    {/* 上一题按钮 */}
                                                    <motion.button
                                                        className="bg-[#6c757d] text-white py-3 px-6 rounded-lg border-none cursor-pointer hover:bg-[#5a6268] disabled:opacity-50 disabled:cursor-not-allowed"
                                                        onClick={handlePrev}
                                                        disabled={currentQuestionIndex <= 0}
                                                        whileHover={{ scale: 1.05 }}
                                                        whileTap={{ scale: 0.95 }}
                                                        transition={{ type: "spring", stiffness: 400, damping: 17 }}
                                                    >
                                                        {t('mbtiPopup.test.prevButton')}
                                                    </motion.button>

                                                    {loading && (
                                                        <motion.div
                                                            className="w-8 h-8 rounded-full border-4 border-[#f3f3f3] border-t-[#4a6fa5]"
                                                            animate={{ rotate: 360 }}
                                                            transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
                                                        ></motion.div>
                                                    )}
                                                    {/* 下一题按钮  */}
                                                    <motion.button
                                                        className="bg-[rgb(223,35,119)] text-white py-3 px-6 rounded-lg border-none cursor-pointer hover:bg-[#3a5f95] disabled:opacity-50 disabled:cursor-not-allowed"
                                                        onClick={handleSubmitAnswer}
                                                        disabled={!selectedOption || loading}
                                                        whileHover={{ scale: 1.05 }}
                                                        whileTap={{ scale: 0.95 }}
                                                        transition={{ type: "spring", stiffness: 400, damping: 17 }}
                                                    >
                                                        {t('mbtiPopup.test.nextButton')}
                                                    </motion.button>
                                                </div>
                                            </div>
                                        </motion.div>

                                        <motion.div
                                            className="md:w-1/3"
                                            initial={{ opacity: 0, x: 20 }}
                                            animate={{ opacity: 1, x: 0 }}
                                            transition={{ delay: 0.4 }}
                                        >
                                            {/* 已回答问题  */}
                                            <h3 className="text-[white] font-medium text-center mb-5">{t('mbtiPopup.test.answeredQuestionsTitle')}</h3>
                                            <div className="overflow-y-auto max-h-[400px] pr-2">
                                                <AnimatePresence>
                                                    {answerHistory.map((item, idx) => (
                                                        <motion.div
                                                            key={idx}
                                                            className="w-full bg-white rounded-lg p-4 shadow cursor-pointer mb-3 border-l-4 border-[#f737a7]"
                                                            initial={{ opacity: 0, x: -50 }}
                                                            animate={{ opacity: 1, x: 0 }}
                                                            exit={{ opacity: 0, x: 50 }}
                                                            transition={{
                                                                type: "spring",
                                                                stiffness: 400,
                                                                damping: 20,
                                                                mass: 1,
                                                                delay: idx * 0.1
                                                            }}
                                                            whileHover={{
                                                                scale: 1.03,
                                                                boxShadow: "0 10px 20px rgba(0,0,0,0.1)",
                                                                borderColor: "#ff9e7d"
                                                            }}
                                                            whileTap={{
                                                                scale: 0.98,
                                                                transition: { type: "spring", stiffness: 300, damping: 10 }
                                                            }}
                                                            onClick={() => {
                                                                setCurrentQuestionIndex(idx);
                                                                setQuestion({
                                                                    id: item.id,
                                                                    text: item.text,
                                                                    options: question?.options || {}
                                                                });
                                                                setSelectedOption(item.selectedOption);
                                                            }}
                                                        >
                                                            {/* 卡片小标题  */}
                                                            <div className="font-bold text-sm mb-2 text-[rgb(255,56,146)] flex items-center">
                                                                <motion.span
                                                                    className="inline-block w-6 h-6 rounded-full bg-[rgb(255,56,146)] text-white text-xs flex items-center justify-center mr-2"
                                                                    whileHover={{ rotate: 360 }}
                                                                    transition={{ duration: 0.5 }}
                                                                >
                                                                    {idx + 1}
                                                                </motion.span>
                                                                {item.text}
                                                            </div>
                                                            {/* 回答  */}
                                                            <div className="text-xs text-gray-700 pl-8"> {item.answerText}</div>
                                                        </motion.div>
                                                    ))}
                                                </AnimatePresence>
                                            </div>
                                        </motion.div>
                                    </div>
                                </>
                            )}

                            {step === 'result' && result && (
                                <motion.div
                                    className=" rounded-lg p-6 mb-5 shadow"
                                    initial={{ opacity: 0, y: 20 }}
                                    animate={{ opacity: 1, y: 0 }}
                                    transition={{ duration: 0.5 }}
                                >
                                    {/* 性格总结  */}
                                    <motion.h2
                                        className="text-2xl mb-1 text-[white]"
                                        initial={{ opacity: 0, y: -20 }}
                                        animate={{ opacity: 1, y: 0 }}
                                        transition={{ delay: 0.2 }}
                                    >
                                        {t('mbtiPopup.result.type', { type: result.dominant_type })}
                                    </motion.h2>
                                    {/* 置信度  */}
                                    <motion.p
                                        className="text-[white] mb-5"
                                        initial={{ opacity: 0 }}
                                        animate={{ opacity: 1 }}
                                        transition={{ delay: 0.3 }}
                                    >
                                        {t('mbtiPopup.result.confidence' )}
                                    </motion.p>

                                    <motion.div
                                        className="mb-6"
                                        initial={{ opacity: 0, y: 20 }} 
                                        animate={{ opacity: 1, y: 0 }}
                                        transition={{ delay: 0.4 }}
                                    >
                                        {/* 比列分析  */}
                                        <motion.h3
                                            className="text-[white] border-b border-[#e9ecef] pb-2 mb-4"
                                            initial={{ x: -20 }}
                                            animate={{ x: 0 }}
                                            transition={{ type: "spring", stiffness: 300, damping: 20 }}
                                        >
                                            {t('mbtiPopup.result.dimensionAnalysis')}
                                        </motion.h3>
                                        <div>
                                            {Object.entries(result.dimension_analysis).map(([dimension, scores], idx) => (
                                                <motion.div
                                                    key={dimension}
                                                    className="mb-5 bg-white rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow"
                                                    initial={{ opacity: 0, x: -20 }}
                                                    animate={{ opacity: 1, x: 0 }}
                                                    transition={{
                                                        type: "spring",
                                                        stiffness: 300,
                                                        damping: 24,
                                                        delay: 0.5 + idx * 0.15
                                                    }}
                                                    whileHover={{ y: -2 }}
                                                >
                                                    <div className="flex justify-between font-bold mb-2">
                                                        <motion.div
                                                            className="flex items-center"
                                                            initial={{ opacity: 0, y: 10 }}
                                                            animate={{ opacity: 1, y: 0 }}
                                                            transition={{ delay: 0.7 + idx * 0.15 }}
                                                        >
                                                            <motion.span
                                                                className="inline-block w-8 h-8 rounded-full bg-[#6b8caf] text-white text-xs flex items-center justify-center mr-2"
                                                                whileHover={{ rotate: 360 }}
                                                                transition={{ duration: 0.5 }}
                                                            >
                                                                {dimension[0]}
                                                            </motion.span>
                                                            <span className="text-[#4a6fa5]">{getDimensionName(dimension[0], t)}</span>
                                                        </motion.div>
                                                        <motion.div
                                                            className="flex items-center"
                                                            initial={{ opacity: 0, y: 10 }}
                                                            animate={{ opacity: 1, y: 0 }}
                                                            transition={{ delay: 0.7 + idx * 0.15 }}
                                                        >
                                                            <span className="text-[#ff9e7d]">{getDimensionName(dimension[1], t)}</span>
                                                            <motion.span
                                                                className="inline-block w-8 h-8 rounded-full bg-[#ff9e7d] text-white text-xs flex items-center justify-center ml-2"
                                                                whileHover={{ rotate: -360 }}
                                                                transition={{ duration: 0.5 }}
                                                            >
                                                                {dimension[1]}
                                                            </motion.span>
                                                        </motion.div>
                                                    </div>
                                                    <div className="flex h-8 bg-[#e9ecef] rounded-full overflow-hidden mb-2.5">
                                                        <motion.div
                                                            className="bg-[#6b8caf] h-full flex items-center justify-center text-white text-xs"
                                                            initial={{ width: 0 }}
                                                            animate={{ width: `${scores[0]}%` }}
                                                            transition={{
                                                                type: "spring",
                                                                stiffness: 100,
                                                                damping: 20,
                                                                delay: 0.8 + idx * 0.15
                                                            }}
                                                        >
                                                            <motion.span
                                                                initial={{ opacity: 0, scale: 0 }}
                                                                animate={{ opacity: 1, scale: 1 }}
                                                                transition={{ delay: 1.2 + idx * 0.15 }}
                                                            >
                                                                {Math.round(scores[0])}%
                                                            </motion.span>
                                                        </motion.div>
                                                        <motion.div
                                                            className="bg-[#ff9e7d] h-full flex items-center justify-center text-white text-xs"
                                                            initial={{ width: 0 }}
                                                            animate={{ width: `${scores[1]}%` }}
                                                            transition={{
                                                                type: "spring",
                                                                stiffness: 100,
                                                                damping: 20,
                                                                delay: 0.8 + idx * 0.15
                                                            }}
                                                        >
                                                            <motion.span
                                                                initial={{ opacity: 0, scale: 0 }}
                                                                animate={{ opacity: 1, scale: 1 }}
                                                                transition={{ delay: 1.2 + idx * 0.15 }}
                                                            >
                                                                {Math.round(scores[1])}%
                                                            </motion.span>
                                                        </motion.div>
                                                    </div>
                                                </motion.div>
                                            ))}
                                        </div>
                                    </motion.div>

                                    <motion.div
                                        className="mb-6"
                                        initial={{ opacity: 0, y: 20 }}
                                        animate={{ opacity: 1, y: 0 }}
                                        transition={{ delay: 0.7 }}
                                    >
                                        <h3 className="text-[#4a6fa5] border-b border-[#e9ecef] pb-2 mb-4">{t('mbtiPopup.result.cognitiveStack')}</h3>
                                        <div>
                                            {Object.entries(result.cognitive_stack).map(([role, fn], idx) => {
                                                const roleKey = role as keyof typeof result.cognitive_stack;
                                                const roleName = t(`mbtiPopup.result.cognitiveRoles.${roleKey}`);
                                                return (
                                                    <motion.div
                                                        key={role}
                                                        className="mb-4"
                                                        initial={{ opacity: 0, x: -20 }}
                                                        animate={{ opacity: 1, x: 0 }}
                                                        transition={{ delay: 0.8 + idx * 0.1 }}
                                                    >
                                                        <span className="font-bold text-[#4a6fa5]">{roleName}:</span> {fn}
                                                    </motion.div>
                                                );
                                            })}
                                        </div>
                                    </motion.div>

                                    <motion.div
                                        className="mb-6"
                                        initial={{ opacity: 0, y: 20 }}
                                        animate={{ opacity: 1, y: 0 }}
                                        transition={{ delay: 0.9 }}
                                    >
                                        <h3 className="text-[#4a6fa5] border-b border-[#e9ecef] pb-2 mb-4">{t('mbtiPopup.result.detailedAnalysis')}</h3>
                                        <div className="whitespace-pre-line leading-7">
                                            {analysisLoading ? (
                                                <motion.div
                                                    className="w-8 h-8 mx-auto my-5 rounded-full border-4 border-[#f3f3f3] border-t-[#4a6fa5]"
                                                    animate={{ rotate: 360 }}
                                                    transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
                                                ></motion.div>
                                            ) : (
                                                <motion.p
                                                    initial={{ opacity: 0 }}
                                                    animate={{ opacity: 1 }}
                                                    transition={{ delay: 1 }}
                                                >
                                                    {detailedAnalysis}
                                                </motion.p>
                                            )}
                                        </div>
                                    </motion.div>
                                </motion.div>
                            )}
                        </div>
                    </motion.div>

                    <style>{`
            @keyframes slideIn {
              0% { transform: translateY(-50px); opacity: 0; }
              100% { transform: translateY(0); opacity: 1; }
            }
          `}</style>
                </motion.div>
            )}
        </AnimatePresence>
    );
};

export default MbtiPopup;
